<template>
	<view>
		<uni-nav-bar title="商城核销" left-icon="back" @clickLeft="$tab.back()" :fixed="true" :border="false"
			:status-bar="true"></uni-nav-bar>

		<view class="py-48 px-20">
			<view class="bg-FFF round-20 py-48 flex flex-col items-center shadow-20">
				<image
					:src="`https://file.jisantour.com/pinggu/profile/wxImages/${state == 1 ? 'saomachenggong' : 'saomashibai'}@2x.png`"
					class="image-200" mode=""></image>
				<view class="text-36 mt-24">
					扫码{{state == 1 ? '成功' : '失败'}}
				</view>
				<view class="mt-24" v-if="state == 2" style="color: #999999;">
					{{detail}}
				</view>
			</view>


			<view class="mt-24" v-if="state == 1 && detail">
				<view class="py-24 px-16 round-16 bg-FFF mb-32 shadow-20">
					<view class="text-24 flex align-center justify-between">
						<view class="">
							订单编号：{{detail.orderId}}
						</view>
					</view>
					<u-divider></u-divider>
					<div class="flex items-start">
						<image :src="globalConfig.imagePrefix + detail.icon" class="image-144" mode=""></image>

						<div class="ml-20">
							{{detail.name}}
						</div>
					</div>
				</view>

				<view class="mt-48 flex items-center justify-between">
					<view class="box-1 text-center text-32" style="color: #666666;border: 2rpx solid #D1D1D1;"
						@click="handleScan">
						继续扫码
					</view>
					<view class="box-1 text-center text-32 text-FFF" style="background: #EC6816;" @click="confirm">
						确认核销
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				orderNo: "",
				state: 1,
				detail: null,
				globalConfig: getApp().globalData.config
			};
		},
		onLoad(e) {
			thro = this
			this.orderNo = e.orderNo
			console.log(this.orderNo)
			this.getData()
		},
		methods: {
			confirm: throttle(2000, async () => {
				const res = await thro.$Api.index.mallOrderWriteOff({
					id: thro.orderNo,
				})
				thro.$modal.msg('核销成功!')
				thro.$tab.back(1500)
			},{
				noTrailing:true
			}),
			handleScan() {
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					scanType: "qrCode",
					success: (res) => {
						this.orderNo = res.result
						this.getData()
					}
				});
			},
			async getData() {
				this.$Api.index.mallOffTicket({
					id: this.orderNo,
				}).then(res => {
					console.log(res)
					this.state = 1
					this.detail = res.data
				}).catch(err => {
					this.state = 2
					this.detail = err
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.box-1 {
		width: 312rpx;
		height: 80rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 80rpx;
	}
</style>